<template>
  <div>
    <div class="main">
      <img :src="getBankBg(cardItem.name)" alt="" />
      <div class="card">
        <p><img :src="getImg(cardItem.name)" alt="" /></p>
        <div class="cardMsg">
          <div class="bankName">
            <p>{{ cardItem.name }}</p>
            <p @click="delCard">删除</p>
          </div>
          <p>储蓄卡</p>
          <p class="bankNum">{{ cardItem.bank_num }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import bankImg from "@/tool/connectBank";
import { Dialog } from "mand-mobile";
export default {
  name: "index.vue",
  props: {
    cardItem: {
      type: Object
    }
  },
  components: {
    [Dialog.name]: Dialog
  },
  data() {
    return {
      bankList: bankImg.bankList,
      bankBgList: bankImg.bankBgList
    };
  },
  methods: {
    getImg(name) {
      let value = this.bankList.find(value => {
        if (value.text === name) {
          return value;
        }
      });
      return value.img;
    },
    getBankBg(name) {
      let value = this.bankBgList.find(value => {
        if (value.text === name) {
          return value;
        }
      });
      return value.img;
    },
    delCard() {
      let that = this;
      Dialog.confirm({
        title: "删除银行卡",
        content: "是否删除银行卡？",
        cancelText: "取消",
        confirmText: "删除",
        onConfirm: () => that.$emit("delCard", that.cardItem.bank_id)
      });
    }
  }
};
</script>

<style scoped lang="stylus">
  .main{
    position relative;
    margin-bottom 15px;
  }
.main>img{
  width 100%;
}
.card{
  width 100%
  padding 42px 33px 0 34px;
  display flex;
  color #ffffff;
  box-sizing border-box;
  position absolute;
  top 0
}
  .card>div{
    flex-grow: 1
    margin-left 16px;
  }
.card>p{
  margin-top 3px;
  width: 64px;
  height: 64px;
  background-color #ffffff;
  display flex;
  align-items center;
  justify-content center;
  border-radius 50%;
}
.card>p>img{
  width 40px;
}
  .bankName{
    display flex;
    justify-content space-between;
    align-items center;
  }
  .bankName>p:first-child{
    font-size 36px;
  }
.bankName+p{
  font-size 26px;
  margin 17px 0 38px;
}
  .bankNum{
    font-size 24px;
  }
</style>
